<template>
  <a-table :columns="columns" :data-source="data2" :pagination="false" class="components-table-demo-nested" @expand="handleExpandRow">
    <template #expandedRowRender="{ record }">
<!--      <a-table :columns="innerColumns" :data-source="innerData3" :pagination="false" />-->
      <a-table :columns="innerColumns" :data-source="getInnerData(record.key - 1)" :pagination="false" />
    </template>
  </a-table>
</template>
<script setup lang="ts">
  import { DownOutlined } from '@ant-design/icons-vue';
  import { defineExpose, defineProps, onMounted, reactive, ref } from 'vue';
  import { defHttp } from '@/utils/http/axios';

  const editValue = defineProps(['editValue']);

  //父子表格
  // 子表格数据数组
  // const innerDataMap = new Map<number, innerDataItem[]>();
  const innerDataMap = reactive(new Map<number, innerDataItem[]>());
  // 获取子表格数据
  function getInnerData(key: number): innerDataItem[] {
    return innerDataMap.get(key) || [];
  }

  // onMounted(()=>{
  //   console.log('挂载完毕',editValue);
  // })

  //传值
  const itemDateAxios = ref([]);
  const DateAxios = ref([]);
  const accountPeriodId = ref();
  function chuanZhi(record) {
    //赋值
    accountPeriodId.value = record.id;
    ///monthlyitem/monthlySummaryItem/list
    console.log('组件传值子组件', record);
    console.log('props组件传值', editValue.editValue);
    //父组件接收数据
    defHttp
      .get({
        url: `/monthlyitem/monthlySummaryItem/list2?accountPeriodId=${record.id}`, // 使用导入的 Api.list 作为接口的 URL，并将 idParam 作为路径参数传递
      })
      .then((response) => {
        // 请求成功处理逻辑
        console.log('组件传值子组件：', response);
        data2.value.length = 0;
        DateAxios.value = response;
        console.log('组件传值子组件数组的长度', DateAxios.value.length);
        //对数组进行赋值
        for (let i = 0; i < DateAxios.value.length; ++i) {
          data2.value.push({
            key: i + 1,
            name: DateAxios.value[i].reportItemGroup,
            platform: DateAxios.value[i].openingBalance,
            version: DateAxios.value[i].currentPeriodReceivable,
            upgradeNum: DateAxios.value[i].currentPeriodReceived,
            creator: DateAxios.value[i].receivedXj,
            createdAt: DateAxios.value[i].receivedAppxszf,
          });
        }
      })
      .catch((error) => {
        // 请求失败处理逻辑
        console.error('222222222接口调用失败：', error);
      });
    //子组件接收参数
    defHttp
      .get({
        url: `/monthlyitem/monthlySummaryItem/list?accountPeriodId=${record.id}`, // 使用导入的 Api.list 作为接口的 URL，并将 idParam 作为路径参数传递
      })
      .then((response) => {
        // 请求成功处理逻辑
        console.log('组件传值子组件：', response);
        innerData2.value.length = 0;
        itemDateAxios.value = response;
        console.log('itemDateAxios数组的长度', itemDateAxios.value.length);
        //对数组进行赋值
        for (let i = 0; i < itemDateAxios.value.length; ++i) {
          // innerData.push({
          //   key: 1,
          //   reportItem: '2014-12-24 23:12:00',
          //   openingBalance: `This is production name ${i + 1}`,
          //   currentPeriodReceivable: '123',
          //   currentPeriodReceived: 'Upgraded: 56',
          //   receivedXj: '123',
          //   receivedAppxszf: '234',
          //   receivedSmzf: '345',
          // });
          let a = i;
          if (i > 5) {
            a = i - 6;
          }
          if (i > 12) {
            a = i - 13;
          }
          innerData2.value.push({
            key: a + 1,
            reportItem: itemDateAxios.value[i].reportItem,
            openingBalance: itemDateAxios.value[i].openingBalance,
            currentPeriodReceivable: itemDateAxios.value[i].currentPeriodReceivable,
            currentPeriodReceived: itemDateAxios.value[i].currentPeriodReceived,
            receivedXj: itemDateAxios.value[i].receivedXj,
            receivedAppxszf: itemDateAxios.value[i].receivedAppxszf,
            receivedSmzf: itemDateAxios.value[i].receivedSmzf,
          });
        }
        innerDataMap.set(0, innerData2.value.slice(0, 6));
        innerDataMap.set(1, innerData2.value.slice(6, 13));
        innerDataMap.set(2, innerData2.value.slice(13));
        console.log('innerDataMap的值为', innerDataMap);
      })
      .catch((error) => {
        // 请求失败处理逻辑
        console.error('222222222接口调用失败：', error);
      });
  }

  //展开事件
  function handleExpandRow(expanded, record) {
    // 在这里处理展开事件，您可以根据需要执行逻辑
    console.log('展开事件111111111111：', expanded, record);
  };
  defineExpose({
    chuanZhi,
  });
  //父表逻辑
  const columns = [
    { title: '项目', dataIndex: 'name', key: 'name' },
    { title: '期初末收款', dataIndex: 'platform', key: 'platform' },
    { title: '本期应收款', dataIndex: 'version', key: 'version' },
    { title: '本期已收款', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    { title: '现金', dataIndex: 'creator', key: 'creator' },
    { title: 'app线上支付', dataIndex: 'createdAt', key: 'createdAt' },
    { title: '扫码支付', dataIndex: 'operation', key: 'operation' },
  ];

  interface DataItem {
    key: string;
    name: string;
    platform: string;
    version: string;
    upgradeNum: number;
    creator: string;
    createdAt: string;
  }

  const data: DataItem[] = [];
  const data2 = ref<DataItem>([]);
  for (let i = 0; i < 3; ++i) {
    data.push({
      key: '1',
      name: `Screem ${i + 1}`,
      platform: 'iOS',
      version: '10.3.4.5654',
      upgradeNum: 500,
      creator: 'Jack',
      createdAt: '2014-12-24 23:12:00',
    });
  }
  //子表逻辑以下
  const innerColumns = [
    { title: '序号', dataIndex: 'key', key: 'key', width: 300, align: 'center' },
    { title: '项目', dataIndex: 'reportItem', key: 'reportItem', width: 300, align: 'center' },
    { title: '期初末收款', dataIndex: 'openingBalance', key: 'openingBalance', width: 300, align: 'center' },
    { title: '本期应收数', dataIndex: 'currentPeriodReceivable', key: 'currentPeriodReceivable', width: 300, align: 'center' },
    { title: '本期已收数', dataIndex: 'currentPeriodReceived', key: 'currentPeriodReceived', width: 300, align: 'center' },
    { title: '现金', dataIndex: 'receivedXj', key: 'receivedXj', width: 300, align: 'center' },
    { title: 'app线上支付', dataIndex: 'receivedAppxszf', key: 'receivedAppxszf', width: 300, align: 'center' },
    { title: '扫码支付', dataIndex: 'receivedSmzf', key: 'receivedSmzf', width: 300, align: 'center' },
    // {
    //   title: 'Action',
    //   dataIndex: 'operation',
    //   key: 'operation',
    // },
  ];

  interface innerDataItem {
    key: number;
    reportItem: string;
    openingBalance: string;
    currentPeriodReceivable: string;
    currentPeriodReceived: string;
    receivedXj: string;
    receivedAppxszf: string;
    receivedSmzf: string;
  }

  const innerData: innerDataItem[] = [];
  const innerData2 = ref<innerDataItem[]>([]);
  const innerData3 = ref<innerDataItem[]>([]);
  // itemDateAxios.value.forEach((item) => {
  //   // 对每个 item 进行操作
  //   console.log(item);
  //   innerData.push({
  //     key: 1,
  //     reportItem: '2014-12-24 23:12:00',
  //     openingBalance: `This is production name ${i + 1}`,
  //     currentPeriodReceivable: '123',
  //     currentPeriodReceived: 'Upgraded: 56',
  //     receivedXj: '123',
  //     receivedAppxszf: '234',
  //     receivedSmzf: '345',
  //   });
  // });
  // for (let i = 0; i < itemDateAxios.value.length; ++i) {
  //   innerData.push({
  //     key: 1,
  //     reportItem: '2014-12-24 23:12:00',
  //     openingBalance: `This is production name ${i + 1}`,
  //     currentPeriodReceivable: '123',
  //     currentPeriodReceived: 'Upgraded: 56',
  //     receivedXj: '123',
  //     receivedAppxszf: '234',
  //     receivedSmzf: '345',
  //   });
  //   // innerData.push({
  //   //   key: i + 1,
  //   //   reportItem: itemDateAxios.value[i].reportItemGroup,
  //   //   openingBalance: itemDateAxios.value[i].openingBalance,
  //   //   currentPeriodReceivable: itemDateAxios.value[i].currentPeriodReceivable,
  //   //   currentPeriodReceived: itemDateAxios.value[i].currentPeriodReceived,
  //   //   receivedXj: itemDateAxios.value[i].receivedXj,
  //   //   receivedAppxszf: itemDateAxios.value[i].receivedAppxszf,
  //   //   receivedSmzf: itemDateAxios.value[i].receivedSmzf,
  //   // });
  // }
</script>

<style scoped lang="less"></style>
